/**
 * @author hanzhichen
 * @date 2021-01-27
 * 不太通用的组件,
 * 一个非常简单的card, 上面是一个大的Title显示金额, 下面是一个小的Table显示金额明细
 * 最初在概览报表中使用...
 */
/* eslint-disable react/jsx-one-expression-per-line */
import React from 'react';
import {Row, Col, Typography} from 'antd';
import {numberHandle} from '~/utils/number';
import './common.styl';

const precision = 2;

const DetailCardTable = props => {
    const {dataSource = {}} = props;
    const {money = [], moneyByDepartment = []} = dataSource;
    const {cardValues = [], unitId = '', unitName = ''} =
        moneyByDepartment?.[0] ?? {};
    return (
        <div className="detail-card-table-container">
            <Row>
                <div className="detail-card-table-container-title">
                    {numberHandle(
                        money?.[0]?.cardValues?.[0]?.value ?? 0,
                        precision
                    )}
                </div>
            </Row>
            <Row className="detail-card-table-container-content">
                {Array.isArray(cardValues) &&
                    cardValues.map(({name, value}) => (
                        <Col span={24} key={name}>
                            <Row wrap>
                                <Col span={10} style={{marginBottom: 12}}>{name}：</Col>
                                <Col span={14}>
                                    {numberHandle(value, precision)}
                                </Col>
                            </Row>
                        </Col>
                    ))}
            </Row>
        </div>
    );
};

export default DetailCardTable;
